<template>
  <div class="page-mobile-presell">
    <van-form validate-first @failed="onFailed">
      <div class="form-item" v-for="(item, index) in form" :key="index">
        <template v-if="item.type == 'input'">
          <van-field
            v-model="item.value"
            :name="item.key"
            :label="item.label"
            :placeholder="item.placeholder"
          />
        </template>
        <template v-if="item.type == 'select'">
          <van-field
            readonly
            clickable
            name="picker"
            :value="item.value"
            :label="item.label"
            :placeholder="item.label"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="item.option"
              @confirm="
                val => {
                  onConfirm(val, item, index);
                }
              "
              @cancel="showPicker = false"
            />
          </van-popup>
        </template>
        <template v-if="item.type == 'switch'">
          <van-field name="switch" :label="item.label">
            <template #input>
              <van-switch v-model="item.value" size="20" />
            </template>
          </van-field>
        </template>
        <template v-if="item.type == 'radio'">
          <van-field name="radio" :label="item.label">
            <template #input>
              <van-radio-group v-model="item.value" direction="horizontal">
                <van-radio
                  :name="item1.value"
                  v-for="(item1, index1) in item.option"
                  :key="index1"
                  >{{ item1.name }}</van-radio
                >
              </van-radio-group>
            </template>
          </van-field>
        </template>
        <template v-if="item.type == 'checkbox'">
          <van-field name="checkboxGroup" :label="item.label">
            <template #input>
              <van-checkbox-group v-model="item.value" direction="horizontal">
                <van-checkbox
                  :name="item1.value"
                  shape="square"
                  v-for="(item1, index1) in item.option"
                  :key="index1"
                  >{{ item1.name }}</van-checkbox
                >
              </van-checkbox-group>
            </template>
          </van-field>
        </template>
        <template v-if="item.type == 'textarea'">
          <van-field
            v-model="item.value"
            rows="2"
            autosize
            :label="item.label"
            type="textarea"
            :placeholder="item.placeholder"
          />
        </template>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showPicker: false,
      a: "1",
      form: [
        {
          type: "input",
          label: "姓名",
          key: "",
          value: "",
          placeholder: "请输入姓名"
        },
        {
          type: "select",
          label: "类型",
          option: ["1", "2", "3"],
          key: "",
          value: "",
          placeholder: "请选择类型"
        },
        {
          type: "switch",
          label: "城市户口",
          key: "",
          value: "",
          placeholder: ""
        },
        {
          type: "radio",
          label: "类型",
          option: [
            { value: 1, name: "1" },
            { value: 2, name: "2" }
          ],
          key: "",
          value: 1,
          placeholder: ""
        },
        {
          type: "checkbox",
          label: "多选",
          option: [
            { value: "1", name: "1" },
            { value: "2", name: "2" }
          ],
          key: "",
          value: [],
          placeholder: ""
        },
        {
          type: "textarea",
          label: "留言",
          key: "",
          value: "",
          placeholder: "请输入留言"
        }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    onFailed() {},
    onConfirm(value, item, index) {
      this.form = this.form.map((i, x) => {
        if (index == x) {
          return {
            ...i,
            value
          };
        } else {
          return i;
        }
      });
      this.showPicker = false;
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.page-mobile-presell {
  background-color: #f7f7f8;
  width: 100vw;
  min-height: 100vh;
  .van-cell {
    padding: 0.2rem;
    .van-field__label {
      width: 1.7rem;
    }
  }
  .van-cell:not(:last-child)::after {
    display: none;
  }
}
</style>
